<link rel="stylesheet" href="/assets/home/plugins/mescroll/mescroll.min.css">
<link rel="stylesheet" href="/assets/home/css/team.css" />

<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
    <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">我的团队</h1>
</header>

<!-- 搜索框 -->
<div class="mui-input-row mui-search">
    <input type="search" class="mui-input-clear" placeholder="请输入昵称" name="search" />
</div>

<div id="team" class="mescroll">
    <div class="list">
        
    </div>
</div>

<script src="/assets/home/plugins/mescroll/mescroll.min.js"></script>

<script>

    let search = '';

    // 实例化插件
    let meScroll = new MeScroll('team',{
        // 下拉刷新
        down: {
            auto:false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: downCallback // 下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        // 上拉加载
        up: {
            auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: UpCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            toTop:{ //配置回到顶部按钮
                duration: 600,
                src : "/assets/home/images/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                offset : 50
            }
        }
    });

    async function downCallback()
    {
        meScroll.resetUpScroll();

        $('#team .list').empty();

        return false;
    }

    async function UpCallback(page)
    {
        let data = {
            page:page.num,
            limit:page.size,
            search
        }

        let result = await POST({
            url:'team/team',
            params:data
        });

        if(result.code === 0)
        {
            mui.toast('暂无成员');

            meScroll.endBySize(0,0)

            return false;
        }

        let list = result.data.list;
        let count = result.data.count;

        meScroll.endBySize(list.length,count);

        fetchList(list);
    }

    function fetchList(list = [])
    {
        if(list.length > 0)
        {
            let Item = '';

            for(let item of list)
            {
                Item = `
                    <div class="item">
                        <div class="avatar">
                            <img src="${item.avatar_cdn}" alt="">
                        </div>
                        <div class="info">
                            <div class="name">${item.nickname}</div>
                            <div class="type">认证状态：${item.auth == 1 ? '已认证' : '未认证'}</div>
                            <div class="time">加入时间：${item.createtime_text}</div>
                        </div>
                    </div>
                `;

                $('#team .list').append(Item);
            }
        }
    }

    $('.mui-search input[type="search"]').keydown(function(e){
        if(e.keyCode == 13 || e.keyCode == 108)
        {
            search = $(this).val();

            downCallback();

            return false;
        }
    })
</script>